<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
				float: left;
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}
			#date{
				width: 406px;
				margin: 0 auto;
				overflow: hidden;
				padding: 25px 30px;
				background: #555450;
			}
			.time1{
				height: 64px;
				font: 43px/64px "微软雅黑";
				color: #fff;
			}
			.time2{
				height: 38px;
				font: 18px/38px "微软雅黑";
				color: #429ce3;
			}
			.time3{
				height: 53px;
				color: #dddddc;
				margin: 15px 0;
				font: 25px/53px "微软雅黑";
			}
			.time3 strong{
				float: left;
				font-weight: normal;
			}
			.time3 div{
				float: right;
				
			}
			.time3 div span{
				font-size: 45px;
				cursor: pointer;
				margin: 0 10px 0 10px;
			}
			#date ul{
				font-size: 0;
			}
			.number{
				font-size: 0;
			}
			#date ul li,.number span{
				width: 58px;
				height: 51px;
				font: 22px/51px "微软雅黑";
				color: #fff;
				text-align: center;
				display: inline-block;
			}
			.number span.color{
				color: #8d8c89;
			}
			.number span.active{
				background: #0078d7;
			}
		</style>
		<script>
			window.onload=function(){
				var time1=document.querySelector(".time1");
				var time2=document.querySelector(".time2");
				var number=document.querySelector(".number");
				var btns=document.querySelectorAll(".time3 span");
				var strong=document.querySelector(".time3 strong");
				
				//即时时间
				function time(){
					//new Date()
					var d=new Date();
					
					time1.innerHTML=format(d.getHours())+':'+format(d.getMinutes())+':'+format(d.getSeconds());
				};
				time();
				
				//给数字前面加上个0
				function format(v){
					return v<10?'0'+v:v;
				}
				//格式化星期
				function formatWeek(v){
					return ['日','一','二','三','四','五','六'][v];
				};
				
				setInterval(time,1000);
				
				
				//即时日期
				var d1=new Date();
				//getMonth得到的月份会少了1，月份是从0开始的
				time2.innerHTML=d1.getFullYear()+'年'+(d1.getMonth()+1)+'月'+d1.getDate()+'日,星期'+formatWeek(d1.getDay());
				
				
				
				
				//获取到某个月的最后一天
				/*var d2=new Date();
				//d2.setDate(13)
				d2.setDate(0);
				console.log(d2.getDate());*/
				
				function getEndDay(year,month){
					return new Date(year,month,0).getDate();
				}
				
				/*var result=getEndDay(2016,8);
				console.log(result)*/
				
				
				//获取到某个月的第一天是星期几
				function getFirstWeek(year,month){
					//月份是从0开始的，所以要让它减个1
					return new Date(year,month-1,1).getDay();
				}
				
				/*var result=getFirstWeek(2016,9);
				console.log(result);*/
				
				var d=new Date();
				
				setDate(d);
				function setDate(d){
					var lastEndDay=getEndDay(d.getFullYear(),d.getMonth());		//获取到上个月的最后一天
					var curEndDay=getEndDay(d.getFullYear(),d.getMonth()+1);	//获取到这个月的最后一天（加个1是为了把月份改成下个月，然后是日期改成0，这样就能回到这个月了）
					var week=getFirstWeek(d.getFullYear(),d.getMonth()+1);		//获取到这个月的第一天的星期数
					
					var curDay=1;		//这个月日期开始的初始值
					var str='';
					var endNum=week-1;	//上个月最后天在日历当中停留的位置(对应的星期数)
					
					if(endNum==0){
						//这个条件成立说明这个月的1号是星期1（没有给上个月留位置）
						endNum=7;		//给上个月留了7个位置
					}
					
					for(var i=0;i<42;i++){
						if(i<endNum){
							//这个条件成立，说明放的是上个月的日期
							str='<span class="color">'+(lastEndDay--)+'</span>'+str;
						}else if(i>=endNum+curEndDay){
							//这个条件成立，说明放的是下个月的日期
							str+='<span class="color">'+(curDay++)+'</span>';
						}else{
							//这个条件成立，说明放的这个月的日期
							/*
							 * 拿span里的数字与今天的日期做对比
							 * 如果相等的话，就让变量cl的值为active
							 * 如果不相等的话，就让变量cl的值为空
							 */
							var cl=new Date().getDate()==(i-endNum+1)?'active':'';
							
							/*
							 * 如果日历上的日期与今天的日期不对应了，说明显示的不是当前朋的时期，就要把lc置为空
							 * 年份不对应或者月份不对应
							 */
							
							if(d.getFullYear()!=new Date().getFullYear() || d.getMonth()!=new Date().getMonth()){
								cl='';
							}
							
							str+='<span class="'+cl+'">'+(i-endNum+1)+'</span>';
						}
					}
					
					number.innerHTML=str;
					
					
					strong.innerHTML=d.getFullYear()+'年'+(d.getMonth()+1)+'月';
				}
				
				
				//点击上个月
				btns[0].onclick=function(){
					d.setMonth(d.getMonth()-1);
					setDate(d);
				};
				
				//点击上个月
				btns[1].onclick=function(){
					d.setMonth(d.getMonth()+1);
					setDate(d);
				};
			};
		</script>
	</head>
	<body>
	    <div id="date">
	    	<div class="time1">17:26:07</div>
	    	<div class="time2">2016年9月8日,星期四</div>
	    	<div class="time3">
	    		<strong>2016年9月</strong>
	    		<div><span>∧</span><span>∨</span></div>
	    	</div>
	    	<ul>
	    		<li>一</li>
	    		<li>二</li>
	    		<li>三</li>
	    		<li>四</li>
	    		<li>五</li>
	    		<li>六</li>
	    		<li>日</li>
	    	</ul>
	    	<div class="number">
	    		<span class="color">1</span>
	    		<span class="color">2</span>
	    		<span class="color">3</span>
	    		<span>4</span>
	    		<span>5</span>
	    		<span class="active">6</span>
	    		<span>7</span>
	    		<span>8</span>
	    		<span>9</span>
	    		<span>10</span>
	    		<span>11</span>
	    		<span>12</span>
	    		<span>13</span>
	    		<span>14</span>
	    		<span>15</span>
	    		<span>16</span>
	    		<span>17</span>
	    		<span>18</span>
	    		<span>19</span>
	    		<span>20</span>
	    		<span>21</span>
	    		<span>22</span>
	    		<span>23</span>
	    		<span>24</span>
	    		<span>25</span>
	    		<span>26</span>
	    		<span>27</span>
	    		<span>28</span>
	    		<span>29</span>
	    		<span>30</span>
	    	</div>
	    </div>
	</body>
</html>
